<template>
  <el-dialog
    :title="view === 'detail'? '商户信息详情': ''"
    :visible="true"
    custom-class="orderDetailWrapper"
    :before-close="closeDialog"
    >
    <vue-body>
    	<el-form :model="tableData" label-width="80px">
    		<el-form-item label="商品名称">
        	<el-input v-model="tableData.productName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="用户名称">
        	<el-input v-model="tableData.userName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="收货人">
        	<el-input v-model="tableData.contact" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="物流名称" v-if="tableData.logisticsName != ''">
        	<el-input v-model="tableData.logisticsName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="物流单号" v-if="tableData.logisticsCode != ''">
        	<el-input v-model="tableData.logisticsCode" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    		<el-form-item label="订单编号">
        	<el-input v-model="tableData.orderNo" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="使用积分">
        	<el-input v-model="tableData.integral" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="支付金额">
        	<el-input v-model="tableData.payAmount" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="支付方式">
      		<div class="typeBox">
            {{this.tableData.payType | payType }}
          </div>
      	</el-form-item>
      	<el-form-item label="配送方式">
        	<el-input v-model="tableData.distributionType" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="订单状态">
      		<div class="typeBox">
        		{{this.tableData.orderStatus | orderStatus }}
        	</div>
      	</el-form-item>
      	<el-form-item label="配送状态">
      		<div class="typeBox">
        		{{this.tableData.distributionStatus | distributionStatus }}
        	</div>
      	</el-form-item>
      	<el-form-item label="总金额">
        	<el-input v-model="tableData.totalAmount" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="订单时间">
        	<el-input v-model="tableData.payTime" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="物流">
      		<div class="typeBox">
        		{{this.tableData.isLogistics | isLogistics }}
        	</div>
      	</el-form-item>
      	
      	<el-form-item label="联系电话">
        	<el-input v-model="tableData.phone" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="详细地址">
        	<el-input v-model="tableData.address" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="省份">
        	<el-input v-model="tableData.province" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="城市">
        	<el-input v-model="tableData.city" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="区县">
        	<el-input v-model="tableData.area" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="留言信息">
        	<el-input v-model="tableData.msg" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	
      	
    	</el-form>
      <!--<el-table
        v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="integral"
          label="使用积分">
        </el-table-column>
        <el-table-column
          prop="payAmount"
          label="支付金额">
        </el-table-column>
        <el-table-column
          label="支付方式">
          <template scope="scope">
            {{ scope.row.payType | payType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="distributionType"
          label="配送方式">
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态">
          <template scope="scope">
            {{ scope.row.orderStatus | orderStatus }}
          </template>
        </el-table-column>
        <el-table-column
          prop="distributionStatus"
          label="配送状态">
          <template scope="scope">
            {{ scope.row.distributionStatus | distributionStatus }}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          label="总金额">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名称">
        </el-table-column>
        <el-table-column
          prop="isLogistics"
          label="物流">
          <template scope="scope">
            {{ scope.row.isLogistics | isLogistics }}
          </template>
        </el-table-column>
        <el-table-column
          prop="contact"
          label="收货人">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份">
        </el-table-column>
        <el-table-column
          prop="city"
          label="城市">
        </el-table-column>
        <el-table-column
          prop="area"
          label="区县">
        </el-table-column>
        <el-table-column
          prop="zipCode"
          label="邮编">
        </el-table-column>
        <el-table-column
          prop="msg"
          label="留言信息">
        </el-table-column>
        <el-table-column
          prop="logisticsName"
          label="物流名称">
        </el-table-column>
        <el-table-column
          prop="logisticsCode"
          label="物流单号">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称">
        </el-table-column>
      </el-table>-->
    </vue-body>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryDetail} from "@/services/order";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
// import {login} from '@/services/login'
// import menuModules from '@/router/modules.json'
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      tableData: {},
      id:""
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit() {
    	this.$emit("close");
    },
    async loadData () {
        this.loading = true
        try {
          let data = await queryDetail(this.id)
          // debugger
//        console.log(data)
          this.tableData = data
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
  },
  mounted() {
  	
  },
  filters: {
      orderStatus (value) {
      	//订单状态
        return {'01': '初始', '02': '已完成','03':'关闭'}[value]
      },
      distributionStatus (value) {
      	//配送状态
        return {'01': '待发货', '02': '已发货'}[value]
      },
      payType (value) {
      	//支付方式
        return {'01': '微信支付', '02': '芸券支付','03':'兴业银行'}[value]
      },
      isLogistics(value) {
      	//是否需要物流
        return {'01': '需要', '02': '不需要'}[value]
      },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.orderDetailWrapper{
  width: 50%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
</style>
